<template>
	<view @click="itemClick('mask')" class="mask-content">
		<view class="dazi-content" @click.stop="" v-if="this.info.actionCode == 'couple_recommend'">
			<image class="position-absolute top-0 z-index-10" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%205035.png" style="width: 248.25rpx; height: 221.69rpx; left: 50%; transform: translate(-50%, -40%);"></image>
			<view class="d-flex d-flex-between d-flex-middle p-3">
				<text class="font26 font-bold">{{info.title}}</text>
				<view class="d-flex d-flex-middle closeBtn" @click="itemClick('cancel')">
					<view class="pl font32 colorfff mr">{{ countdown }}S</view>
					<text class="colorfff iconfont icon-cuo font38"></text>
				</view>
			</view>
			<view class="position-relative z-index-100" style="top: -75rpx;">
				<view class="d-flex d-flex-column d-flex-middle d-flex-center">
					<image :src="info.image" class="rounded mb-1" style="width: 125rpx; height: 125rpx;border: solid 6rpx #e65fd0;"></image>
					
					<view class="d-flex d-flex-middle" style="margin-bottom: 2px;">
						<text class="font32 mb-1 mr-1">{{info.content}}</text>
						<view class="d-flex d-flex-middle py px-2 rounded30" :style="{background: info.gender==1? '#61BAFF' : '#FDA4E3'}">
							<image :src="info.gender==1? 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/male.png' : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/female.png'" style="width: 20rpx; height: 20rpx;"></image>
							<view class="colorfff ml-1">{{info.age}}</view>
						</view>
					</view>
					
					<view class="mb-2 d-flex d-flex-middle">
						<view class="d-flex d-flex-middle">
							<view class="d-flex-btn" style="padding: 0 12rpx 0 20rpx; background: #f7c356; border-radius: 10rpx 0 0 10rpx; height: 40rpx;">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/rec-position.png" style="width: 22rpx; height: 28rpx;"></image>
							</view>
							<view class="font22" style="color: #ff9f53; padding: 0 15rpx 0 15rpx; background: #fceacc; border-radius: 0 10rpx 10rpx 0; height: 40rpx; line-height: 45rpx;">{{ info.ipProvince }}</view>
						</view>
						<view class="d-flex d-flex-middle ml-2">
							<view class="d-flex-btn" style="padding: 0 12rpx 0 20rpx; background: #b73de3; border-radius: 10rpx 0 0 10rpx; height: 40rpx;">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203178.png" style="width: 28rpx; height: 22rpx;"></image>
							</view>
							<view class="font22" style="color: #be52e7; padding: 0 15rpx 0 15rpx; background: #eed2f9; border-radius: 0 10rpx 10rpx 0; height: 40rpx; line-height: 45rpx;">{{ info.gameName }}</view>
						</view>
					</view>
					<view class="d-flex d-flex-center d-flex-middle linerbg rounded50" style="width: 460rpx;padding-top: 22rpx;padding-bottom: 22rpx;" @click.stop="itemClick('confirm')">
						<text class="colorfff font30">{{info.confirmText}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				info:{
					type:"alert",//alert:单按钮,confirm:双按钮
					title:"温馨提示",//
					image:"http://aliyun_id_photo_bucket.oss.aliyuncs.com/default_handsome.jpg",
					content:"遥光（国野）",
					cancelText:"取消",
					confirmText:"确定",
					actionCode: "",
					age: "",
					gender: "",
					ipProvince: "",
					gameName: "",
					isMaskClose:"1",//1点击遮罩层关闭弹窗
				},
				countdown: 10,
				timer: null
			}
		},
		onLoad(info={}) {
			this.info = {...this.info,...info};
			console.log(this.info);
		},
		onShow() {
			this.timer = setInterval(() => {
				this.countdown--;
				if (this.countdown <= 0) {
					if(this.timer) {
						this.itemClick('cancel');
						clearInterval(this.timer);
					}
				}
			}, 1000);
		},
		methods: {
			itemClick(type){
				console.log(type);
				if(type=="mask"&&this.info.isMaskClose!='1'){
					return;
				}
				if(type=='cancel') {
					clearInterval(this.timer);
				}
				uni.navigateBack()
				if(type =="confirm"){
					uni.$emit("wujw_common_dialog",type);
				}
			}
		},
		onUnload() {
			clearInterval(this.timer);
		}
	}
</script>

<style lang="scss">
	page {
		background: transparent;
	}
	.mask-content {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 1111111;
		.dazi-content{
			margin-top: 120rpx;
			position: relative;
			width: 640rpx;
			height: 418rpx;
			background-color: #FFFFFF;
			border-radius: 50rpx;
			background-image: url('https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%205036.png');
			background-repeat: no-repeat;
			background-size: 640rpx 378rpx;
		}
	}
	.closeBtn{
		background-image: linear-gradient(to right, #d2cef6, #bae0ff);
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
	}
</style>